<template>
  <div>
    <!--送审材料定义列表-->
    <etable ref="eTable" v-show="currentState === 'normal'" :columns="columns"
            searchPlaceholder="用户名/姓名" @btnClick="handClick" :tools="['search','refresh','export']">
      <div slot="buttons">
        <Button type="primary" @click="add">新增</Button>
      </div>
    </etable>
    <usersaveupdate ref="su" @showTable="showTable" @hideTable="hideTable"></usersaveupdate>
  </div>
</template>

<script>
import etable from '@/components/easy-table/easy-table.vue'
import usersaveupdate from './user-save-update.vue'
import { updateStatus, deleteUser } from '../../../api/sys/user'

export default {
  name: 'user',
  components: {
    etable,
    usersaveupdate
  },
  data: function () {
    return {
      url: 'sys/user/list?',
      currentState: 'normal',
      columns: [
        {
          type: 'index',
          minWidth: 60,
          maxWidth: 60,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'username',
          align: 'center',
          minWidth: 100,
          searchType: 'input',
          editable: true
        },
        { title: '姓名', key: 'name', align: 'center', minWidth: 120, searchType: 'input' },
        { title: '邮箱', key: 'email', align: 'center', minWidth: 120 },
        { title: '手机', key: 'mobile', align: 'center', minWidth: 120 },
        {
          title: '状态',
          key: 'status',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            const row = params.row
            let number = parseInt(row.status)
            const color = number === 1 ? 'primary' : 'error'
            const text = number === 1 ? '正常' : '禁用'
            return h('Tag', {
              props: {
                type: 'dot',
                color: color
              }
            }, text)
          }
        },
        { title: '创建时间', key: 'createTime', align: 'center', width: 160, searchType: 'datetimerange' },
        {
          title: '操作',
          key: 'handle',
          align: 'center',
          width: 140,
          options: ['edit', 'lock', 'delete']
        }
      ]
    }
  },
  methods: {
    handClick (name, params) {
      if (name === 'delete') {
        this.handleDelete(params)
      } else if (name === 'edit') {
        this.handleEdit(params)
      } else if (name === 'lock') {
        this.handleLock(params)
      }
    },
    handleDelete (params) {
      deleteUser(params.row.userId).then(res => {
        this.init()
      })
    },
    handleLock (params) {
      const status = params.row.status === 1 ? 0 : 1
      updateStatus(params.row.userId, status).then(res => {
        this.init()
      })
    },
    handleEdit (params) {
      this.$refs['su'].showEdit(params.row.userId)
    },
    hideTable () {
      this.currentState = 'unNormal'
    },
    showTable () {
      this.currentState = 'normal'
      this.init()
    },
    add () {
      this.$refs['su'].showAdd()
    },
    init () {
      this.$refs['eTable'].init(this.url)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>

</style>
